<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=yes" />


    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js" ></script>
</head>
<body>


<canvas id="myCanvas" style="border:1px solid #d3d3d3;background:#ffffff;" >your browser does not support the canvas tag </canvas>

<div>
<img src="img/1.jpg" id="test-picture" style="display: none">
<img src="img/f1.jpg" id="test-frame" style="display: none">

<select id="frameset" onchange="init_PF()">
    <option value="1">相框1</option>
    <option value="2">相框2</option>

</select>

<select id="imgset" onchange="init_PF()">
    <option value="1">图片1</option>
    <option value="2">图片2</option>
    <option value="3">图片3</option>
    <option value="4">图片4</option>
    <option value="5">图片5</option>
    <option value="6">图片6</option>
    <option value="7">图片7</option>
</select>

<input id="sel_file" type="file" id="images"  accept="image/*" />

</div>




<script type="text/javascript">


function drawPic()
{
    img = document.getElementById('test-picture')
    iframe = document.getElementById('test-frame')
    console.log(img.width)
    var canvas=document.getElementById('myCanvas');
    ctx=canvas.getContext('2d');



    fconf = get_fconfig()
    drawWithFram(ctx,img,iframe,fconf)



}
function get_fconfig()
{
    v = $("#frameset").val()
    console.log(v)

    cf = {"width":500,"height":582,"top":92,"left":92,"bottom":92,"right":92,"pad":10}
    if (v == "1")
    {
        cf = {"width":500,"height":582,"top":92,"left":92,"bottom":92,"right":92,"pad":10}
    }
    else if(v == "2")
    {
        cf = {"width":650,"height":890,"top":160,"left":130,"bottom":160,"right":130,"pad":10}
    }
    return  cf
}

function  drawWithFram(ctx,img,iframe,fconfig)
{
    //先画frame
    initCanvas(ctx,iframe,fconfig)
    //画图片 注意是按比例处理的。
    initImgContent(ctx,img,fconfig)
}

function initCanvas(ctx,iframe,fconfig)
{
    console.log('initCanvas')
    console.log(fconfig)


    var canvas=document.getElementById('myCanvas');
    canvas.setAttribute("width",fconfig.width)
    canvas.setAttribute("height",fconfig.height)
    ctx.clearRect(0,0,fconfig.width,580);
    ctx.drawImage(iframe,0,0,fconfig.width,fconfig.height,0,0,fconfig.width,fconfig.height)
}

function initImgContent(ctx,img,fconfig)
{
    console.log('initImgContent')
    //计算显示区域的大小
    var w = fconfig.width - fconfig.left - fconfig.right - 2*fconfig.pad;
    var h = fconfig.height - fconfig.top - fconfig.bottom - 2*fconfig.pad;

    conf = getScaleImg(img.width,img.height,w,h)
    console.log(conf);
    console.log(fconfig);

    at_w = parseInt((w-conf.width)/2+fconfig.pad + fconfig.left)
    at_h = parseInt((h-conf.height)/2+fconfig.pad + fconfig.top)
    console.log(at_w,at_h)
    ctx.drawImage(img,0,0,img.width,img.height,at_w,at_h,conf.width,conf.height)

    //对真实图像新进等比缩放
}

function getScaleImg(iw,ih,ow,oh)
{
    console.log(iw,ih,ow,oh)
    if ( iw >= ih)
    {
        if (iw > ow)
        {
            ih = ow*ih/iw;
            iw=ow
            console.log(iw,ih)
        }
        
    }else{
        
        if (ih > oh)
        {
            iw = oh * iw / ih;
            ih = oh;
            console.log(iw,ih)
        }

    }

    if ( iw >= ih)
    {
        if (iw > ow)
        {
            ih = ow*ih/iw;
            iw=ow
            console.log(iw,ih)
        }

    }else{

        if (ih > oh)
        {
            iw = oh * iw / ih;
            ih = oh;
            console.log(iw,ih)
        }

    }

     return {"width":iw,"height":ih};
}

function init_PF()
{
    console.log('init_PF')
    fs = $('#frameset').val()
    console.log(fs)
    imgsrc = "img/f"+fs+'.jpg'
    if ($('#test-frame')[0].src != imgsrc)
    {
        $("#test-frame").attr('src',imgsrc);
    }


    is = $('#imgset').val()
    console.log(is)
    imgsrc = "img/"+is+'.jpg'
    if ($('#test-picture')[0].src != imgsrc)
    {
        $("#test-picture").attr('src',imgsrc);
    }

    

}

$(document).ready(function(){
    // 在这里写你的代码...
    init_PF()

    $("#test-picture").bind('load',function(){

        drawPic()
    })

    $("#sel_file").bind('change',function(){
        console.log('sel_file change')
        var file = this.files[0]

        var reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload=function(e)
        {
            console.log(this.result)
            $("#test-picture").attr('src',this.result);
        }
        
    })



});





</script>


</body>
</html>